<template>
	<div id="background" class="fixed"></div>
	<div class="bg-backdrop-layout"></div>
	<div class="login-container">
	  <div class="login-width md:w-10/12 w-11/12 mx-auto flex justify-between h-full items-center">
		<div class="w-6/12 mx-auto left-panel rounded-l pl-5 pr-5 hidden md:block">
		  <div class="logo"><img :src="`${$url}logo.svg`" width="45"><span>{{ $title }}</span></div>
		  <div class="slogan flex justify-end"><span>---- {{ $t('login.slogan') }}</span></div>
		</div>
  
		<div class="md:w-6/12 w-11/12 md:rounded-r mx-auto pl-5 pr-5 pb-10">
		  <h2 class="mt-10 text-3xl pb-0 mb-10">{{ $CONFIG.APP_NAME }}</h2>
		  <el-form :model="form" @submit="handleSubmit">
			<el-tabs>
					<el-tab-pane :label="$t('login.accountLogin')" lazy>
						<password-form></password-form>
					</el-tab-pane>
					<el-tab-pane :label="$t('login.mobileLogin')" lazy>
						<phone-form></phone-form>
					</el-tab-pane>
				</el-tabs>
  
			<el-form-item v-if="!isDevelop"	>
			  <el-input
				  v-model="code"
				  :placeholder="$t('login.verifyCode')"
				  size="large"
				  allow-clear
			  >
				<template #prefix></template>
				<template #append>
				  <verify-code ref="Verify" />
				</template>
			  </el-input>
			</el-form-item>
  
			<el-form-item :hide-label="true" class="mt-5">
			  <el-button html-type="submit" type="primary" long size="large" :loading="loading">
				{{ $t('login.loginBtn') }}
			  </el-button>
			</el-form-item>
  
			<el-divider orientation="center">{{ $t('login.otherLoginType') }}</el-divider>
			<div class="flex w-3/4 pt-2 mx-auto items-stretch justify-around">
			  <el-avatar class="other-login wechat"><icon-wechat /></el-avatar>
			  <el-avatar class="other-login alipay"><icon-alipay-circle /></el-avatar>
			  <el-avatar class="other-login qq"><icon-qq /></el-avatar>
			  <el-avatar class="other-login weibo"><icon-weibo /></el-avatar>
			</div>
		  </el-form>
		</div>
	  </div>
	</div>
  </template>
  <script>
  import passwordForm from './components/passwordForm'
  import phoneForm from './components/phoneForm'

  export default {
	  components: {
		  passwordForm,
		  phoneForm		  
	  },
	  data() {
		  return {
			  config: {
				  lang: this.$TOOL.data.get('APP_LANG') || this.$CONFIG.LANG,
				  dark: this.$TOOL.data.get('APP_DARK') || false
			  },
			  lang: [
				  {
					  name: '简体中文',
					  value: 'zh-cn',
				  },
				  {
					  name: 'English',
					  value: 'en',
				  }
			  ],
			  WechatLoginCode: "",
			  showWechatLogin: false,
			  isWechatLoginResult: false
		  }
	  },
	  watch:{
		  'config.dark'(val){
			  if(val){
				  document.documentElement.classList.add("dark")
				  this.$TOOL.data.set("APP_DARK", val)
			  }else{
				  document.documentElement.classList.remove("dark")
				  this.$TOOL.data.remove("APP_DARK")
			  }
		  },
		  'config.lang'(val){
			  this.$i18n.locale = val
			  this.$TOOL.data.set("APP_LANG", val)
		  }
	  },
	  created: function() {
		  this.$TOOL.cookie.remove("TOKEN")
		  this.$TOOL.data.remove("USER_INFO")
		  this.$TOOL.data.remove("MENU")
		  this.$TOOL.data.remove("PERMISSIONS")
		  this.$TOOL.data.remove("DASHBOARDGRID")
		  this.$TOOL.data.remove("grid")
		  this.$store.commit("clearViewTags")
		  this.$store.commit("clearKeepLive")
		  this.$store.commit("clearIframeList")
		  console.log('%c SCUI %c Gitee: https://gitee.com/lolicode/scui', 'background:#666;color:#fff;border-radius:3px;', '')
	  },
	  methods: {
		  configDark(){
			  this.config.dark = this.config.dark ? false : true
		  },
		  configLang(command){
			  this.config.lang = command.value
		  },
		  wechatLogin(){
			  this.showWechatLogin = true
			  this.WechatLoginCode = "SCUI-823677237287236-" + new Date().getTime()
			  this.isWechatLoginResult = false
			  setTimeout(()=>{
				  this.isWechatLoginResult = true
			  },3000)
		  }
	  }
  }
</script>
  <style scoped>
	#background {
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	}
	.bg-backdrop-layout {
	top: 0;
	left: 0;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 2;
	backdrop-filter: blur(25px);
	}
	.login-container {
	width: 100%;
	height: 100%;
	position: absolute;
	background-size: cover;
	z-index: 3;
	}
	.login-container .login-width {
	max-width: 950px;
	background: #fff;
	padding: 10px;
	height: 500px;
	position: relative;
	top: 50%;
	margin-top: -255px;
	border-radius: 10px;
	}
	.login-container .left-panel {
	height: 491px;
	background-image: url(@/assets/login_picture.svg);
	background-repeat: no-repeat;
	background-position: center 60px;
	background-size: contain;
	}
	.login-container .logo {
	display: flex;
	margin-top: 20px;
	color: #333;
	}
	.login-container .logo span {
	font-size: 28px;
	margin-left: 15px;
	color: #000000;
	}
	.login-container .slogan {
	font-size: 16px;
	line-height: 50px;
	}
	.login-container :deep(.arco-input-append) {
	padding: 0 !important;
	}
	.login-container .other-login {
	cursor: pointer;
	}
	.login-container .qq:hover,
	.login-container .alipay:hover {
	background: #165DFF;
	}
	.login-container .wechat:hover {
	background: #0f9c02;
	}
	.login-container .weibo:hover {
	background: #f3ce2b;
	}
  </style>